<template>
  <div :class="[ns.b()]">
    <header>
      <h4>{{ props.title }}</h4>
      <div v-if="$slots.header"><slot name="header" /></div>
    </header>
    <div :class="[ns.e('content')]">
      <slot />
    </div>
  </div>
</template>
<script lang="ts">
  export default { name: 'sectionInfoComponent' }
</script>
<script setup lang="ts">
  // ui层和业务层，暴露一些方法
  import { useUamespace } from '@/hooks/use-namesapce'

  // interface
  import type { SectionInfoInterface } from './types/props'
  /**
   * props
   */
  const props = withDefaults(defineProps<SectionInfoInterface>(), {})

  const ns = useUamespace('section-info')
</script>
<style lang="scss" scoped>
  @include b(section-info) {
    + .a-section-info {
      margin-top: 32px;
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      h4 {
        font-weight: normal;
        display: flex;
        align-items: center;
        line-height: 1;
        &::before {
          content: '';
          display: block;
          width: 4px;
          height: 14px;
          margin-right: 5px;
          background-color: $primary;
        }
      }
    }
  }
</style>
